<template>
  <div class="illegalFlightCount">
    <div class="container">
      <div class="search-card">
        <div class="search-argument">
          <!-- 拥有者 -->
          <div class="search-item">
            <span class="labelName">{{ $t("statistics.Owner") }}</span>
            <el-input
              clearable
              v-model="params.applicant"
              class="search-input"
              :placeholder="$t('placeholder.Owner')"
            ></el-input>
          </div>

          <!-- 时间类型 -->
          <div class="search-item">
            <span class="labelName">{{ $t("statistics.TimeType") }}</span>
            <el-select
              clearable
              v-model="params.type"
              class="search-input"
              :placeholder="$t('placeholder.TimeType')"
            >
              <el-option
                v-for="item in timeTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

          <!-- 日期 -->
          <div class="search-item">
            <span class="labelName">{{ $t("statistics.Date") }}</span>
            <el-date-picker
              clearable
              v-model="searchTime"
              class="search-item"
              :type="dateType"
              range-separator="至"
              :start-placeholder="$t('statistics.startTime')"
              :end-placeholder="$t('statistics.endTime')"
            />
          </div>

          <!-- 搜索按钮 -->
          <div class="search-button">
            <div class="btn search" @click="getList">
              <el-icon class="icon" color="#fff"> <Search /> </el-icon
              >{{ $t("common.search") }}
            </div>
            <div class="btn reset" @click="reset">
              <el-icon class="icon" color="rgba(43, 193, 123, 1)">
                <Refresh /> </el-icon
              >{{ $t("common.reset") }}
            </div>
          </div>
        </div>
      </div>

      <!-- 表格数据 -->
      <el-table max-height="60vh" v-loading="loading" :data="illegalData">
        <el-table-column
          :label="$t('statistics.Date')"
          :show-overflow-tooltip="true"
          min-width="80"
          align="center"
        >
          <template #default="{ row }">
            <span v-if="row.day">{{ row.day }}</span>
            <span v-if="row.month">{{ row.month }}</span>
            <span v-if="row.year">{{ row.year }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('statistics.IllegalSorties')"
          prop="violationInstances"
          :show-overflow-tooltip="true"
          min-width="80"
          align="center"
        />
        <el-table-column
          :label="$t('statistics.FlightDuration')"
          prop="flyDuration"
          :show-overflow-tooltip="true"
          min-width="80"
          align="center"
        />
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="params.pageNum"
        v-model:limit="params.pageSize"
        @pagination="getList"
        class="pagination"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "IllegalFlightCount",
};
</script>
<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { getViolationflyList } from "@/api/statistics";
import dayjs from "dayjs";

const searchTime = ref();
const loading = ref(false);
const illegalData = ref([]);
const timeTypeList = reactive([
  {
    label: "时间（天）",
    value: 0,
  },
  {
    label: "时间（月）",
    value: 1,
  },
  {
    label: "时间（年）",
    value: 2,
  },
]);

const params = ref(initParams());
const total = ref(0);

const dateType = computed(() => {
  if (params.value.type === 1) return "monthrange";
  if (params.value.type === 2) return "year";
  return "daterange";
});

/**
 * @初始化表单对象
 * */
function initParams() {
  return {
    pageNum: 1,
    pageSize: 10,
    applicant: null,
    startTime: null,
    endTime: null,
    type: 0,
  };
}

/**
 * @获取列表数据
 * */
const getList = async () => {
  try {
    loading.value = true;
    console.log(searchTime.value);
    if (searchTime.value) {
      if (params.value.type === 0) {
        params.value.startTime = dayjs(searchTime.value[0]).format(
          "YYYY-MM-DD"
        );
        params.value.endTime = dayjs(searchTime.value[1]).format("YYYY-MM-DD");
      }
      if (params.value.type === 1) {
        params.value.startTime = dayjs(searchTime.value[0]).format(
          "YYYY-MM-DD"
        );

        params.value.endTime = dayjs(
          new Date(
            dayjs(searchTime.value[1]).format("YYYY"),
            dayjs(searchTime.value[1]).format("MM"),
            0
          )
        ).format("YYYY-MM-DD");
      }
      if (params.value.type === 2) {
        params.value.startTime = dayjs(searchTime.value).format("YYYY-MM-DD");
        params.value.endTime =
          dayjs(searchTime.value).format("YYYY") + "-12-31";
      }
    } else {
      params.value.startTime = null;
      params.value.endTime = null;
    }
    const res = await getViolationflyList(params.value);
    illegalData.value = res.rows;
    total.value = res.total;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

/**
 * @重置搜索参数
 * */

const reset = () => {
  searchTime.value = null;
  params.value = initParams();
  getList();
};

watch(
  () => params.value.type,
  (newV, oldV) => {
    searchTime.value = null;
  }
);

onMounted(() => {
  getList();
});
</script>

<style lang="scss">
.search-item .search-input .el-input,
.search-time .el-date-editor {
  height: 40px !important;
}
</style>

<style scoped lang="scss">
.illegalFlightCount {
  width: 100%;
  height: 100%;

  .container {
    position: relative;
    width: calc(100% - 40px);
    height: 92%;
    margin: 0 20px 20px;
    border-radius: 10px;
    background: white;

    .pagination {
      position: absolute;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
    }
  }

  .search-card {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    padding: 30px 0 ;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-color: #fff;
  }

  .search-argument {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 20px;

    .search-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 24%;
      height: 40px;

      .search-input {
        flex: 1;
        width: 270px;
        height: 40px;
      }

      .search-time {
        flex: 1;
        width: 270px;
        height: 40px;
      }
    }

    .labelName {
      width: 110px;
      text-align: right;
      font-size: 14px;
      margin-right: 15px;
    }

    .search-button {
      position: absolute;
      right: 0px;
      top: -45px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 160px;
      height: 40px;
    }
  }

  .tag {
    display: inline-block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 15px;
    color: rgba(153, 153, 153, 1);
    border: 1px solid rgba(153, 153, 153, 1);
  }
  .tag.warning {
    color: rgba(255, 149, 18, 1);
    border: 1px solid rgba(255, 149, 18, 1);
  }
  .tag.success {
    color: rgba(43, 193, 123, 1);
    border: 1px solid rgba(43, 193, 123, 1);
  }

  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
    padding: 10px;
    font-size: 14px;
    border-radius: 4px;
    user-select: none;
    cursor: pointer;
  }
  .btn.search {
    color: #fff;
    background: rgba(43, 193, 123, 1);
    &:hover {
      background: rgba(43, 193, 123, 0.85);
    }
  }

  .btn.reset {
    color: rgba(43, 193, 123, 1);
    background: rgba(43, 193, 123, 0.05);
    border: 1px solid rgba(43, 193, 123, 1);
    &:hover {
      background: rgba(43, 193, 123, 0.2);
    }
  }

  .btn.remove {
    color: rgba(255, 149, 18, 1);
    background: rgba(255, 149, 18, 0.05);
    border: 1px solid rgba(255, 149, 18, 1);
    &:hover {
      background: rgba(255, 149, 18, 0.2);
    }
  }

  .icon {
    margin-right: 6px;
  }
}
</style>
